<!--
 * @LastEditTime: 2024-09-15 04:38:26
 * @Description: 
 * @Date: 2024-09-15 03:39:45
 * @Author: wangshan
 * @LastEditors: wangshan
-->
<template>
  <div style="width: 100%">
    <v-form-render v-if="show" :form-json="props.formconfig" :form-data="formData" :option-data="optionData" ref="vFormRef">
    </v-form-render>
    <!-- <el-button type="primary" @click="submitForm">Submit</el-button> -->
  </div>
</template>

<script setup>
  import { ref, reactive, watch, nextTick } from 'vue'
  import { ElMessage } from 'element-plus'

  /* 注意：formJson是指表单设计器导出的json，此处演示的formJson只是一个空白表单json！！ */
  const formJson = reactive({"widgetList":[
    {
        "key": 24103,
        "type": "textarea",
        "icon": "textarea-field",
        "formItemFlag": true,
        "options": {
            "name": "textarea101095",
            "label": "textarea",
            "labelAlign": "",
            "rows": 3,
            "defaultValue": "",
            "placeholder": "",
            "columnWidth": "200px",
            "size": "",
            "labelWidth": null,
            "labelHidden": false,
            "readonly": false,
            "disabled": false,
            "hidden": false,
            "required": false,
            "requiredHint": "",
            "validation": "",
            "validationHint": "",
            "customClass": [],
            "labelIconClass": null,
            "labelIconPosition": "rear",
            "labelTooltip": null,
            "minLength": null,
            "maxLength": null,
            "showWordLimit": false,
            "onCreated": "",
            "onMounted": "",
            "onInput": "",
            "onChange": "",
            "onFocus": "",
            "onBlur": "",
            "onValidate": ""
        },
        "id": "textarea101095"
    }
],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
  const formData = reactive({})
  const optionData = reactive({})
  const vFormRef = ref(null)

  const props = defineProps({
    formconfig: {
      type: Object,
      default() {
        return {}
      }
    }
  })
  const show = ref(false)
  watch(() => props.formconfig, (n) => {
    console.log('forree================', n);
    if(show.value) {
      show.value = false
      nextTick(() => {
        show.value = true
      })
    } else {
      show.value = true
    }
    
    
  })

  const submitForm = () => {
    vFormRef.value.getFormData().then(formData => {
      // Form Validation OK
      alert( JSON.stringify(formData) )
    }).catch(error => {
      // Form Validation failed
      ElMessage.error(error)
    })
  }
</script>